<html>

<head>
    <!-- Page styling here -->
    <link rel='stylesheet' type='text/css' href='./style/style.css'>

    <!--Countly script-->
    <script type='text/javascript' src='../lib/countly.js'></script>
    <script type='text/javascript'>

        Countly.init({
            app_key: 'YOUR_APP_KEY', //your app key
            url: 'https://your.domain.countly', //your server goes here
            debug: true
        });
        //=====================================================================================================
        // DEPRECATED!!! CHECK OUT example_feedback_widgets.html INSTEAD
        //=====================================================================================================
        // Below you have to fill YOUR_WIDGET_ID with the widget ID you get from the server after creating your widget
        //Use Pop Widget to popup the widget manually without clicking on the widget
        //Use Multiple Widgets to display multiple widgets
        //Press Enable Widget to return back to the original widget
        function enable() {
            //to re-enable rating widget if necessary 
            Countly.enableRatingWidgets({ 'popups': ['YOUR_WIDGET_ID'] }); //example: {'popups':['12asd15fsgf546516a5sdf']}
        }
        function pop() {
            //to manually popup the widget
            Countly.presentRatingWidgetWithID("YOUR_WIDGET_ID"); // example: "12asd15fsgf546516a5sdf"
        }
        function multi() {
            //to show multiple widgets
            var widgets = ["YOUR_WIDGET_ID", "YOUR_WIDGET_ID"]; // example: ["12asd15fsgf546516a5sdf", "45646asd8asdweqrfg54"]
            Countly.initializeRatingWidgets(widgets);
        }

    </script>
</head>

<body>
    <!-- Header, banner etc. Top part of your site  -->
    <div id="header">
        <h1>Rating Widgets</h1>
        <img id="logo" src="./images/logo.png">
    </div>

    <center>
        <img src="./images/team_countly.jpg" id="wallpaper" />
        <p><a href='https://countly.com/'>Countly</a></p>
        <p><button onclick="enable()">Enable Widget</button></p>
        <p><button onclick="pop()">Pop Widget</button></p>
        <p><button onclick="multi()">Multiple Widgets</button></p>
    </center>
</body>

</html>